<template>
	<view class="login-container">
		<image src="/static/img/login_bg.png" mode="aspectFill" class="login-bg"></image>
		<view class="login-nav">
			<view :class="{active: type ==='account'}" @click="toggle_login('account')">账号登录</view>
			<view :class="{active: type ==='phone'}" @click="toggle_login('phone')">手机登录</view>
		</view>
		<uni-forms ref="form" :modelValue="form_data" :rules="form_rules">
			<template v-if="type === 'account'">
				<uni-forms-item label="账号" name="account">
					<uni-easyinput type="text" v-model="form_data.account" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item name="password" label="密码">
					<uni-easyinput type="password" v-model="form_data.password"
						placeholder="请输入密码" />
				</uni-forms-item>
			</template>
			<template v-else>
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput type="number" maxlength="11" v-model="form_data.phone"
						placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item name="captcha" label="验证码">
					<uni-easyinput type="text" maxlength="6" v-model="form_data.captcha"
						placeholder="请输入验证码" :clearable="false" />
					<CaptchaBtn @get_form="get_form" @get_code="real_code = $event"
						:form="$refs.form" />
				</uni-forms-item>
			</template>
			<button type="default" class="login-btn" @click="_user_login">立即登录</button>
		</uni-forms>
		<view class="footer">
			<text @click="to_register">注册</text>
			<text>忘记密码</text>
		</view>
	</view>
</template>

<script>
	import rules from '../rules.js'

	export default {
		data() {
			return {
				type: 'account',
				form_data: {
					account: '',
					password: '',
					phone: '',
					captcha: '' // 用户填的验证码
				},
				real_code: '', // 真实验证码
				form_rules: rules(this)
			}
		},
		methods: {
			toggle_login(type) {
				this.type = type
				this.$refs.form.clearValidate([])
			},
			async _user_login() { // 统一命名格式，异步方法以 _ 开头
				// validate 与 submit 方法相同，submit 即将废弃
				const form_data = await this.$refs.form.validate()
				const user_info = await this.$http.user_login({
					...form_data,
					type: this.type
				}) // 如果请求失败，会被拦截处理，不会继续往下执行

				this.$store.commit('set_user_info', user_info)
				uni.showToast({
					title: '登录成功',
					icon: 'success'
					// success  fail  complete  都是同步函数
				})
				// 所以只能用延时函数执行，返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
			get_form(callback) {
				callback && callback(this.$refs.form)
			},
			to_register() {
				uni.navigateTo({
					url: '/pages/auth/register/register'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.login-container {
		.login-bg {
			width: 100%;
			display: block;
		}

		.login-nav {
			background-color: #f8f8f8;
			@include flex(space-around);
			height: 100rpx;

			view {
				color: #999;
				font-size: 30rpx;
				font-weight: 600;
				position: relative;
				flex: 1;
				text-align: center;

				&.active {
					color: $base-color;

					&::after {
						content: ""; // 这个不能忘
						position: absolute;
						width: 70rpx;
						height: 8rpx;
						background-color: $base-color;
						left: 50%;
						bottom: -15rpx;
						transform: translateX(-50%);
					}
				}
			}
		}

		.login-btn {
			margin-top: 70rpx;
			background-color: $base-color;
			color: #fff;
			width: 80%;
		}

		.footer {
			@include flex();
			width: 80%;
			margin: 20rpx auto 0;

			text {
				color: #999;
			}
		}
	}

	/deep/ .uni-forms-item {
		margin-bottom: 10rpx;
		background-color: #fff;
	}

	/deep/ .uni-forms-item__inner {
		padding: 15rpx 0 40rpx;
	}

	/deep/ .uni-forms-item__label {
		padding-left: 20rpx;
	}

	/deep/ .label-text span {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
	}

	/deep/ .uni-forms-item__content {
		@include flex();
	}

	/deep/ .uni-easyinput {
		padding-right: 15rpx;
	}

	/deep/ .uni-error-message {
		bottom: -5rpx;
	}
</style>
